<template>
  <el-dialog title="自定义表头" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" :before-close="close">
    <el-table ref="multipleTable" :data="tableData" :border="true" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="全选"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="determineHandler">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { parameter } from '@/api/api'
  export default {
    mixins: [dialogEditMixin],
    data() {
      return {
        // 总字段
        tableData: [
          { name: '序号' },
          { name: '员工编码' },
          { name: '员工姓名' },
          { name: '性别' },
          { name: '生日' },
          { name: '身份证号' },
          { name: '手机号' },
          { name: '邮箱' },
          { name: '地址' },
          { name: '照片' },
          { name: '部门' },
          { name: '职位' },
          { name: '工种' },
          { name: 'RFID卡' },
          { name: '门禁ID' },
          { name: '工作状态' },
          { name: '人脸识别' },
          { name: '门禁启用/禁用' },
          { name: '备注' },
          { name: '操作' }
        ],
        // 保存选中的字段
        dataList: [],
        // 总列表表头
        tableList: [
          // { type: 'selection' },
          { prop: 'indexId', label: '序号', width: '60px' },
          { prop: 'employeeCode', label: '员工编码', align: 'center', minWidth: '120px' },
          { prop: 'name', label: '员工姓名', align: 'center', minWidth: '80px' },
          {
            prop: 'sex',
            label: '性别',
            align: 'center',
            minWidth: '54px',
            formatter(row, col, cell) {
              let sex,
                sexList = [
                  { label: '男', value: 1 },
                  { label: '女', value: 0 }
                ]
              sexList.forEach(item => {
                if (item.value == cell) {
                  sex = item.label
                }
              })
              return sex
            }
          },
          {
            prop: 'birthday',
            label: '生日',
            align: 'center',
            minWidth: '96px',
            formatter(row, col, cell) {
              let date = new Date(cell)
              let year = date.getFullYear()
              let month = date.getMonth() + 1
              month = month >= 10 ? month : '0' + month
              let d1 = date.getDate()
              d1 = d1 >= 10 ? d1 : '0' + d1
              let time_str = year + '-' + month + '-' + d1
              return cell ? time_str : '--'
            }
          },
          { prop: 'idCard', label: '身份证号', align: 'center', minWidth: '166px' },
          { prop: 'phone', label: '手机号', align: 'center', minWidth: '110px' },
          { prop: 'email', label: '邮箱', align: 'center', minWidth: '180px' },
          { prop: 'adress', label: '地址', align: 'center', minWidth: '200px' },
          {
            prop: 'photo',
            label: '照片',
            custom: 'col2',
            minWidth: '80px',
            align: 'center'
          },
          {
            prop: 'departmentId',
            label: '部门',
            minWidth: '80px',
            align: 'center',
            formatter(row, col, cell) {
              return row.department ? row.department.deptName : ''
            }
          },
          {
            prop: 'jobId',
            label: '职位',
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.job ? row.job.jobTitle : ''
            },
            align: 'center'
          },
          {
            prop: 'workId',
            label: '工种',
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.work ? row.work.workName : ''
            },
            align: 'center'
          },
          { prop: 'rfid', label: 'RFID卡', minWidth: '80px', align: 'center' },
          { prop: 'accessCardID', label: '门禁ID', minWidth: '80px', align: 'center' },
          {
            prop: 'status',
            label: '工作状态',
            minWidth: '80px',
            formatter(row, col, cell) {
              if (row.status == "0" || row.status == "1") {
                return Number(row.status) == 1 ? '在职' : '离职'
              } else {
                return row.status
              }

            },
            align: 'center'
          },
          {
            prop: 'faceDetect',
            label: '人脸识别',
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.faceDetect === 1 ? '开启' : '关闭'
            },
            align: 'center'
          },
          {
            prop: 'faceDetect',
            label: '门禁启用/禁用',
            minWidth: '118px',
            formatter(row, col, cell) {
              return row.isEnable ? '启用' : '禁用'
            },
            align: 'center'
          },
          { prop: 'comment', label: '备注', align: 'center', minWidth: '180px' },
          { label: '操作', custom: 'col1', align: 'center', minWidth: '108px', fixed: 'right' }
        ]
      }
    },
    methods: {
      resetFormData() { },

      handleSelectionChange(event) {
        this.dataList = event
      },
      selectionChange(value) {
        this.$nextTick(() => {
          let refDom = this.$refs.multipleTable
          this.tableData.forEach(item => {
            value.forEach(edit => {
              if (edit.label && edit.label === item.name) {
                refDom.toggleRowSelection(item, true)
              }
            })
          })
        })
      },
      determineHandler() {
        let ary = []
        this.tableList.forEach(item => {
          let bolen = this.dataList.some(edit => item.label === edit.name)
          if (bolen) {
            ary.push(item)
          }
        })
        parameter('put', { name: 'TableConfig', value: JSON.stringify(ary), id: 6 }).then((res) => {
          if (res.code === 200) {
            this.$emit('setTableCol', ary)
            this.close()
          } else {
            this.$message.error('表头设置失败')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped></style>
